<template>
  <div
    class="flex items-center justify-between text-[#666666] text-[12px] select-none"
  >
    <el-space direction="horizontal" alignment="start" :size="8">
      <el-select
        v-model="state.group_id"
        class="w-[124px]"
        filterable
        placeholder="全部分组"
      >
        <el-option
          v-for="item in groupList"
          :key="item.id"
          :label="item.name"
          :value="(item.id  as any)"
        />
      </el-select>
      <el-select
        v-model="state.node_status"
        class="w-[124px]"
        filterable
        placeholder="全部节点状态"
      >
        <el-option
          v-for="item in nodeList"
          :key="item.value"
          :label="item.label"
          :value="(item.value  as any)"
        />
      </el-select>
      <el-select
        v-model="state.tcc_status"
        class="w-[124px]"
        filterable
        placeholder="全部TCC状态"
      >
        <el-option
          v-for="item in tccList"
          :key="item.value"
          :label="item.label"
          :value="(item.value  as any)"
        />
      </el-select>
      <el-input
        v-model="state[getBindField]"
        placeholder="请输入"
        class="ml-4 input-with-select"
        clearable
        @clear="handleRefresh"
        @keyup.enter="handleClickIcon"
      >
        <template #prepend>
          <el-select
            v-model="state.fieldStatus"
            placeholder="请选择"
            style="width: 96px"
          >
            <el-option
              v-for="item in operationList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
        <template #append>
          <el-button :icon="Search" @click="handleClickIcon" />
        </template>
      </el-input>
    </el-space>
    <el-space
      direction="horizontal"
      alignment="start"
      :size="16"
      class="operation-right"
    >
      <el-button
        color="#2AC179"
        class="text-[#fff]"
        @click="handleCommand('start')"
        >启用TCC</el-button
      >
      <el-button color="#376AF7" @click="handleCommand('end')"
        >禁用TCC</el-button
      >
      <el-button
        color="#2D61EE"
        class="bg-[#fff] text-[#2D61EE]"
        plain
        :icon="Delete"
        @click="handleCommand('delete', multipleSelection)"
        >删除</el-button
      >
      <el-button
        type="primary"
        plain
        :icon="Refresh"
        class="w-8 mr-[-16px]"
        @click="() => handleRefresh()"
      ></el-button>
    </el-space>
  </div>
</template>
<script lang="ts" setup>
import { Search, Refresh, Delete } from '@element-plus/icons-vue'
import { get, isFunction } from 'lodash-es'
import { ElMessageBox, ElNotification, ElMessage } from 'element-plus'
import {
  multipleSelection,
  state,
  TCC_STATUS_LIST,
  NODE_STATUS_LIST,
  OPERATION_LIST,
  resetFunc
} from '../state'
import type { NodeGroupData } from '@/apis/model/node'
import { OPERATION_DATA } from '../state'
const emit = defineEmits(['refresh-list'])

const tccList = computed(() => TCC_STATUS_LIST)
const nodeList = computed(() => NODE_STATUS_LIST)
const operationList = computed(() => OPERATION_LIST)
const getBindField = computed(() => OPERATION_DATA[state.fieldStatus])
const handleRefresh = () => emit('refresh-list')

const handleClickIcon = () => {
  reset()
  emit('refresh-list')
}
const reset = () => {
  const field = getBindField.value
  const arr = ['name', 'ip', 'kernel_version', 'tcc_version']
  if (arr.includes(field)) {
    const newArr = arr
      .map(item => {
        if (item !== field) return item
      })
      .filter(Boolean)
    newArr.forEach((item: any) => (state[item] = ''))
  }
}
type IStatus = 'start' | 'end'
const handleChange = (type: IStatus) => {
  const text = type == 'start' ? '启用' : '禁用'
  ElMessageBox.confirm(`确定要${text}该节点的TCC吗？`, `${text}TCC`, {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    customClass: 'basic-message-box'
  })
    .then(() => {
      const params = {
        ids: multipleSelection.value,
        next_tcc_status: type == 'start' ? 1 : 2
      }
      update_multiple_status({ ...params }).then(() => {
        ElMessage({ type: 'success', message: `${text}成功` })
      })
    })
    .catch(() => {})
}
const handleDeleteNode = (ids: string[]) => {
  if (multipleSelection.value.length <= 0) {
    ElNotification.warning({
      title: '提示',
      message: '请至少选择一个分组进行删除'
    })
    return
  }
  ElMessageBox.confirm('确定要删除该节点的TCC吗？', '删除TCC', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    closeOnClickModal: false,
    customClass: 'basic-message-box'
  }).then(() => {
    delete_nodes({ ids })
      .then(() => {
        ElNotification.success({
          title: '成功',
          message: '删除成功'
        })
      })
      .finally(() => {
        emit('refresh-list')
      })
  })
}
type ICommand = 'start' | 'end' | 'more' | 'delete'
const handleCommand = (command: ICommand, record?: any) => {
  const actions: Record<ICommand, () => void> = {
    start: (): void => {
      handleChange('start')
    },
    end: (): void => {
      handleChange('end')
    },
    more: (): void => {},
    delete: (): void => {
      handleDeleteNode(record)
    }
  }
  if (isFunction(get(actions, command))) {
    actions[command]()
  }
}
const groupList = ref<NodeGroupData[]>()
const getGroupList = () => {
  node_group({})
    .then(res => {
      groupList.value = res?.list ?? []
      groupList?.value?.unshift({ id: 0, name: '全部分组' })
    })
    .finally(() => {})
}
//防抖
const antiShake = (time: number) => {
  return setTimeout(() => {
    console.log('防抖')
    handleRefresh()
  }, time)
}
let timer: any = null
watch(
  [() => state.node_status, () => state.group_id, () => state.tcc_status],
  value => {
    console.log('value: ', value)
    clearTimeout(timer)
    timer = antiShake(300)
  },
  { deep: true, immediate: true }
)
onMounted(() => getGroupList())
onUnmounted(() => resetFunc())
</script>

<style lang="scss" scoped>
:deep(.el-select) {
  .el-input__inner {
    font-size: 12px;
    color: #333333;
  }
}
:deep(.el-button) {
  font-size: 12px;
}
:deep(.input-with-select) {
  .el-input .el-input--suffix {
    background: #fff;
  }
  .el-input__wrapper {
    color: #333;
    .el-input__inner {
      // width: 162px;
    }
  }
  .el-input-group__append {
    padding: 0 14px;
    background: #fff;
  }
}
.operation-right {
  .el-button {
    width: 88px;
  }
}
</style>
status
